<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>媒体对象</title>
</head>
<body>
    <div class="container">
        <!-- 默认媒体对象 -->
        <!-- 整个媒体对象使用.media包裹 -->
        <div class="media mt-3">
            <img src="../images/LOGO.PNG" alt="" height="80px" width="190px" >
            <!-- 显示文本的部分使用.media-body包裹 -->
            <div class="media-body">
                <h5>NIIT <small><i>2023年12月1日发布</i></small> </h5>
                <p>1997年，全球领先的技能和人才发展机构NIIT进入中国</p>
            </div>
        </div>

        <div class="media mt-3">
            <!-- 媒体组件的变化，可以给媒体组件加边框或者圆角 -->
            <img src="../images/LOGO.PNG" class="rounded-circle" alt="" height="80px" width="190px" >
            <div class="media-body">
                <h5>NIIT <small><i>2023年12月1日发布</i></small> </h5>
                <p>1997年，全球领先的技能和人才发展机构NIIT进入中国</p>
            </div>
        </div>
        <!-- 嵌套媒体对象 -->
        <div class="media mt-3">
            <img src="../images/LOGO.PNG" class="rounded-circle" alt="" height="80px" width="190px" >
            <div class="media-body">
                <h5>NIIT <small><i>2023年12月1日发布</i></small> </h5>
                <p>1997年，全球领先的技能和人才发展机构NIIT进入中国</p>
                <!-- 把一个媒体对象放在另一个媒体对象的.media-body中形成嵌套关系 -->
                <div class="media mt-3">
                    <img src="../images/LOGO.PNG" alt="" height="80px" width="190px" >
                    <div class="media-body">
                        <h5>NIIT <small><i>2023年12月1日发布</i></small> </h5>
                        <p>1997年，全球领先的技能和人才发展机构NIIT进入中国</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 媒体对象的水平对齐:调整标签的位置,把img放在media-body后面,图片就会被对齐到最右边 -->
        <div class="media mt-3">
            <div class="media-body">
                <h5>NIIT <small><i>2023年12月1日发布</i></small> </h5>
                <p>1997年，全球领先的技能和人才发展机构NIIT进入中国</p>
            </div>
            <img src="../images/LOGO.PNG" alt="" height="80px" width="190px" >
        </div>
        <!-- 媒体对象垂直对齐: -->
        <div class="media mt-3">
            <!-- .align-self-center实现中间对齐,.align-self-end底部对齐  -->
            <img src="../images/LOGO.PNG" alt="" height="80px" width="190px" class="align-self-center">
            <div class="media-body">
                <h5>NIIT <small><i>2023年12月1日发布</i></small> </h5>
                <p>1997年，全球领先的技能和人才发展机构NIIT进入中国</p>
                <p>NIIT是一家全球领先的学习外包公司,提供管理培训服务,包括定制内容开发与课程设计,学习管理,学习交付,战略采购和学习技术.</p>
                <p>NIIT是一家全球领先的学习外包公司,提供管理培训服务,包括定制内容开发与课程设计,学习管理,学习交付,战略采购和学习技术.</p>
                <p>NIIT是一家全球领先的学习外包公司,提供管理培训服务,包括定制内容开发与课程设计,学习管理,学习交付,战略采购和学习技术.</p>
            </div>
        </div>
        <!-- 媒体对象列表 -->
        <!-- .list-unstyle去除无序列表的小圆点 -->
        <ul class="list-unstyle">
            <!-- .media放在li标签上 -->
            <li class="media">
                <img src="../images/LOGO.PNG" alt="" height="80px" width="190px" >
                    <div class="media-body">
                        <h5>NIIT <small><i>2023年12月1日发布</i></small> </h5>
                        <p>1997年，全球领先的技能和人才发展机构NIIT进入中国</p>
                    </div>
            </li>
            <li class="media mt-2">
                <img src="../images/LOGO.PNG" alt="" height="80px" width="190px" >
                    <div class="media-body">
                        <h5>NIIT <small><i>2023年12月1日发布</i></small> </h5>
                        <p>1997年，全球领先的技能和人才发展机构NIIT进入中国</p>
                    </div>
            </li>
        </ul>
    </div>
</body>
</html>